import axios from "axios";
import React, { use, useDebugValue, useId, useState, useSyncExternalStore } from "react";
import './index.scss'
import { createPortal } from "react-dom";


function App() {

    const [isShow, setIsShow] = useState(false)

    // createPortal 创建一个弹出的传送内容
    // 参数1 是传送的内容，内容可以是一个完整的组件
    // 参数2 是传送到哪里去
    const portalHtml = isShow && createPortal(<div className="portal" onClick={() => setIsShow(false)}>
        <div>
            <h2>温馨提示 <span onClick={() => setIsShow(false)}>关闭</span> </h2>
            <section>今天是周五，明天可以躺平了，后天我也能躺平了，好开心啊。</section>
        </div>
    </div>, document.querySelector('#ma'))

    return <div>
        <h1>App</h1>
        <div id="ma"></div>
        {portalHtml}
        <button onClick={() => {
            setIsShow(true)
        }}>点击显示</button>


    </div>
}


export default App